<template>
  <div class="tools-section">
    <div class="section-header flex items-center justify-between mb-10">
      <h2
        class="section-title text-3xl font-extrabold text-indigo-700 dark:text-indigo-400 drop-shadow-sm"
      >
        {{ title }}
      </h2>
      <a-button
        type="primary"
        class="view-more-btn"
        @click="handleViewMore"
      >
        查看更多
        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
        </svg>
      </a-button>
    </div>
    <ToolCard
      :tools="tools || []"
    />
  </div>
</template>

<script setup lang="ts">
/**
 * 新工具展示组件
 * 用于展示一组工具卡片，包含标题和工具列表
 * 提供随机渐变色背景和页面浏览量数据
 */

import type { ToolItem } from '~/types/tools';

/**
 * 组件属性定义
 */
const props = defineProps<{
  /** 工具列表数据 */
  categoryId: number;
  /** 工具列表数据 */
  tools?: ToolItem[];
  /** 分类标题 */
  title: string;
  /** 工具总数 */
  total: number;
}>();

const { tools = [], title } = props;

/**
 * 处理查看更多按钮点击事件
 * 根据标题内容导航到相应的分类页面
 */
const handleViewMore = () => {
  navigateTo(`/tools/${props.categoryId}`);
};


/**
 * 标题装饰线渐变色
 * 为标题下方的装饰线生成随机渐变色
 * 使用CSS linear-gradient实现渐变效果
 */
const titleLineGradient = computed(() => {
  // 预定义的颜色组合
  const colors = [
    ['#667eea', '#764ba2'],
    ['#4facfe', '#00f2fe'],
    ['#43e97b', '#38f9d7'],
    ['#fa709a', '#fee140'],
    ['#30cfd0', '#330867'],
    ['#a8edea', '#fed6e3'],
    ['#ff9a9e', '#fecfef'],
    ['#ffecd2', '#fcb69f'],
    ['#ff8a80', '#ff5722'],
    ['#84fab0', '#8fd3f4'],
    ['#a1c4fd', '#c2e9fb'],
    ['#d4fc79', '#96e6a1'],
    ['#fddb92', '#d1fdff'],
    ['#9890e3', '#b1f4cf']
  ];
  // 随机选择颜色组合
  const randomIndex = Math.floor(Math.random() * colors.length);
  const colorPair = colors[randomIndex] || ['#667eea', '#764ba2'];  // 如果随机失败，使用默认颜色
  const [from, to] = colorPair;
  // 返回CSS渐变字符串
  return `linear-gradient(135deg, ${from} 0%, ${to} 100%)`;
});
</script>

<style lang="less" scoped>
.tools-section {
  margin-bottom: 32px;

  .section-header {
    position: relative;
    padding: 10px 0;
  }

  .section-title {
    margin-bottom: 0;
    position: relative;
    padding: 10px 0;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 60px;
      height: 3px;
      background: v-bind(titleLineGradient);
      border-radius: 2px;
    }
  }

  .view-more-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .tools-section {
    margin-bottom: 24px;
    .section-title {
      font-size: 24px;
      
      &::before {
        left: 50%;
        transform: translateX(-50%);
      }
    }
    
    .view-more-btn {
      align-self: center;
    }
    
    /* 调整网格布局 */
    :deep(.grid) {
      gap: 16px;
    }
  }
}
</style>
